import React, { useRef, useEffect, useState } from "react";
import styles from "./add.less"
import { Select, Button, message, Popconfirm, Form, Input } from 'antd';
// import Quill from 'quill';
import Editor from 'for-editor'
import { useDispatch, useSelector } from 'umi'
import { IQuestionType, ISubject, IExamType, IQuestionForm } from '@/utils/interface'
// import 'quill/dist/quill.snow.css';
const addQuestions: React.FC = () => {
    // 获取form实例
    const [form] = Form.useForm();
    const dispatch = useDispatch()
    const { questionType, subjects, examTypes, user_id } = useSelector(models => { return { ...models.addQuestions, ...models.user.userInfo } });
    useEffect(() => {
        dispatch({
            type: 'addQuestions/getQuestionType',
        })
        dispatch({
            type: 'addQuestions/getExamSubject'
        })
        dispatch({
            type: 'addQuestions/getExamType'
        })
    }, [])

    useEffect(() => {
        const values: { [key: string]: string } = {};
        if (questionType.length) {
            values.questions_type_id = questionType[0].questions_type_id;
        }
        if (subjects.length) {
            values.subject_id = subjects[0].subject_id;
        }
        if (examTypes.length) {
            values.exam_id = examTypes[0].exam_id;
        }
        form.setFieldsValue(values)
    }, [questionType, subjects, examTypes]);

    const inputLayout = {
        wrapperCol: { span: 12 }
    };

    const editorLayout = {
        wrapperCol: { span: 6 }
    }

    //点击提交
    function onFinish(values: IQuestionForm) {
        // debugger;
        let result = dispatch({
            type: 'addQuestions/submitQuestions',
            payload: { ...values, user_id }
        });
        (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
            if (res.code === 1) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
            form.resetFields();
        })
    }

    const { Option } = Select;
    return <Form className={styles.wrap} onFinish={onFinish} form={form} initialValues={{
        title: '',
        questions_stem: '',
        questions_answer: '',
        exam_id: examTypes[0]?.exam_id,
        questions_type_id: questionType[0]?.questions_type_id,
        subject_id: subjects[0]?.subject_id
    }}>
        <div className={styles.h}>
            <h1 >编辑试题</h1>
        </div>

        <div className={styles.cotent}>
            <p>题目信息</p >
            <p>提干</p >
            <Form.Item    {...inputLayout}
                name="title"
                rules={[
                    {
                        required: true,
                        message: '请输入试题题干',
                    },
                ]}>
                <Input placeholder="请输入题目标题，不超过20字" />
            </Form.Item>
            <div>
                <p>题目主题</p >
                <Form.Item name='questions_stem' rules={[{ required: true }]}>
                    <Editor />
                </Form.Item>
            </div>


            <div className={styles.type}>
                <label htmlFor="">请选择考试类型：</label>
                <Form.Item
                    name="exam_id"
                    {...editorLayout}
                >
                    <Select>{
                        (examTypes as IExamType[]).map(item => {
                            return <Option key={item.exam_id} value={item.exam_id}>{item.exam_name}</Option>
                        })
                    }</Select>
                </Form.Item>

                <label htmlFor="">请选择课程类型：</label>
                <Form.Item
                    name="subject_id"
                    {...editorLayout}
                >
                    <Select>{
                        (subjects as ISubject[]).map(item => {
                            return <Option key={item.subject_id} value={item.subject_id}>{item.subject_text}</Option>
                        })
                    }</Select>
                </Form.Item>

                <label htmlFor="">请选择题目类型：</label>
                <Form.Item
                    name="questions_type_id"
                    {...editorLayout}
                >
                    <Select>{
                        (questionType as IQuestionType[]).map(item => {
                            return <Option key={item.questions_type_id} value={item.questions_type_id}>{item.questions_type_text}</Option>
                        })
                    }</Select>
                </Form.Item>
                <div>
                    <p>答案信息</p >
                    <Form.Item name='questions_answer' rules={[{ required: true }]}>
                        <Editor />
                    </Form.Item>
                </div>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>

            </div>
        </div>

    </Form>
}

export default addQuestions
